<template>
    <div id="container" style="width: 1000px; min-height: 400px; padding: 12px">
        <a-empty v-if="!detail.linkSystem" />
    </div>
</template>

<script lang="ts">
import G6 from '@antv/g6';
import store from '@/store';
import { defineComponent, ref, unref, reactive, toRefs, onMounted } from 'vue';
export default defineComponent({
    props: {
        detail: {
            type: Object,
            default: () => ({})
        }
    },
    setup(props) {
        const state = reactive<any>({
            data: {}
        });
        const init = () => {
            G6.registerNode(
                'tree-node',
                {
                    drawShape: function drawShape(cfg: any, group: any) {
                        const rect = group.addShape('rect', {
                            attrs: {
                                fill: cfg.depth > 0 ? '#FB7555' : '#0176d3',
                                stroke: cfg.depth > 0 ? '#FB7555' : '#0176d3',
                                x: 0,
                                y: 0,
                                width: 1,
                                height: 1
                            },
                            name: 'rect-shape'
                        });
                        const content = cfg.name.replace(/(.{19})/g, '$1\n');
                        const text = group.addShape('text', {
                            attrs: {
                                text: content,
                                x: 0,
                                y: 0,
                                textAlign: 'left',
                                textBaseline: 'middle',
                                fill: '#fff',
                                fontSize: 7 // 字体大小
                            },
                            name: 'text-shape'
                        });
                        const bbox = text.getBBox();
                        const hasChildren = cfg.children && cfg.children.length > 0;
                        rect.attr({
                            x: -bbox.width / 2 - 4,
                            y: -bbox.height / 2 - 6,
                            width: bbox.width + (hasChildren ? 26 : 12),
                            height: bbox.height + 12
                        });
                        text.attr({
                            x: -bbox.width / 2,
                            y: 0
                        });
                        return rect;
                    }
                },
                'single-node'
            );

            const container: any = document.getElementById('container');
            const width = container.scrollWidth;
            const height = container.scrollHeight || 500;
            const graph = new G6.TreeGraph({
                container: 'container',
                width,
                height,
                modes: {
                    default: [
                        // {
                        //     type: 'collapse-expand',
                        //     onChange: function onChange(item: any, collapsed) {},
                        // },
                        // 'drag-canvas',
                        // 'zoom-canvas',
                    ]
                },
                defaultNode: {
                    size: 20,
                    type: 'tree-node',
                    anchorPoints: [
                        [0, 0.5],
                        [1, 0.5]
                    ]
                },
                defaultEdge: {
                    type: 'cubic-horizontal',
                    style: {
                        stroke: 'rgba(0,0,0,0.1)'
                    }
                },
                layout: {
                    type: 'compactBox',
                    direction: 'H',
                    getId: function getId(d) {
                        return d.id;
                    },
                    getHeight: function getHeight() {
                        return 16;
                    },
                    getWidth: function getWidth() {
                        return 16;
                    },
                    getVGap: function getVGap() {
                        return 20;
                    },
                    getHGap: function getHGap() {
                        return 80;
                    }
                }
            });
            G6.Util.traverseTree(state.data, function (item) {
                item.id = item.name;
            });
            graph.data(state.data);
            graph.render();
            graph.fitView();

            if (typeof window !== 'undefined')
            {window.onresize = () => {
                if (!graph || graph.get('destroyed')) {return}
                if (!container || !container.scrollWidth || !container.scrollHeight) {return}
                graph.changeSize(container.scrollWidth, container.scrollHeight);
            };}
        };

        onMounted(() => {
            if (props.detail.linkSystem) {
                const data: any = {
                    name: `【${props.detail.pmpProductDetailDTO.systemName}】${props.detail.requireName || props.detail.requestName}`,
                    children: []
                };
                const codeArr = props.detail.linkSystem.codes.split(',');
                codeArr.forEach((item) => {
                    const target = store.getters.dicOptions.systemModel.find((elem) => elem.code === item);
                    if (target) {
                        data.children.push({
                            name: target.dimensionName
                        });
                    }
                });
                state.data = data;
                init();
            }
        });
    }
});
</script>

<style scoped>
</style>